<!-- 该画面是辅助信息Sheet画面,用于新增\修改辅助信息 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="1100px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    append-to-body
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" label-width="210px">
      <el-form-item
        v-for="(item, index) in commonsection"
        :key="'commonsection-'+index"
        :label="item.section + '・' + item.section_item"
      >
        <el-input
          v-model="form[item.section + item.section_item]"
          :placeholder="item.placeholder || '请输入'"
          :disabled="item.disabled"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="createFlag" type="primary" @click="submitForm">{{
        $t('create')
      }}</el-button>
      <el-button v-else type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createProjectPlanCommonApi, updateProjectPlanCommonApi } from '@/views/projectbase/common/projectplancommon.api';
import { getCommonSectionTypeListApi } from '@/views/projectbase/projectauxiliary/api/projectauxiliary.api'

export default {
  name: 'FixedItemForm',
  data() {
    return {
      title: this.$t('projectAuxiliaryMainTitle'),
      form: {}, // 存储输入值
      openSheet: false,
      createFlag: true,
      commonsection: [],
      commonparams: {
        projectPlanFK: undefined,
        page: 1,
        page_size: 1000
      },
      sectionlist: [],
      commonresultparams: {
        projectPlanFK: undefined,
        itemlist: []
      }
    }
  },
  created() {
    // this.initFormData();
  },
  methods: {
    // 初始化，data对应的是maintain中的项目计划信息；commondata对应的是辅助信息
    async openSheetDialog(data, commondata) {
      this.openSheet = !this.openSheet;
      this.initialize();
      this.reset();
      if (commondata) {
        this.createFlag = false;
        this.projectPlanId = data.id;
        this.initFormData()
        this.form = { ...commondata };
        console.log(this.form)
      } else {
        this.createFlag = true;
        this.projectPlanId = data.id;
      }
    },
    initialize() {
      this.getCommonSectionTypeList()
    },
    // 获取辅助信息类型列表
    async getCommonSectionTypeList() {
      this.commonparams.projectPlanFK = this.projectPlanId
      var resp = await getCommonSectionTypeListApi(this.commonparams)
      if (resp.success) {
        this.commonsection = resp.data.results;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    initFormData() {
      // 初始化表单值：优先使用父组件传递的formData，无则留空
      this.commonsection.forEach(item => {
        this.form[item.label] = this.formData[item.label] || '';
      });
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    reset() {
      this.resetForm('form');
      // this.resetJsonObject(this.form)  //这句话加上之后点击取消按钮后再打开这个画面，里面的数据会被清空。只有第一次打开的时候会显示数据
    },
    submitForm: function() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.sectionlist = []
          var resp;
          const itemlist = this.commonsection.map(item => ({
            section: item.id,
            value: this.form[item.section + item.section_item]
          }))
          this.commonresultparams.itemlist = itemlist
          this.commonresultparams.projectPlanFK = this.projectPlanId

          if (this.createFlag) {
            resp = await createProjectPlanCommonApi({ ...this.commonresultparams });
          } else {
            resp = await updateProjectPlanCommonApi({ ...this.commonresultparams });
          }
          if (resp.success) {
            this.$emit('refreshList');
            this.cancel();
            if (this.createFlag) {
              this.targaMessage(
                this.$t('createSuccessNoInfo')
              );
            } else {
              this.targaMessage(
                this.$t('updateSuccessNoInfo')
              );
            }
          } else {
            if (typeof resp.msg === 'object') {
              this.error = resp.msg;
            } else {
              this.targaMessageBox(this, resp.msg);
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.DescriptionTitle {
margin-left: 20px;
margin-bottom: 10px;
font-size: 16px;
color: #606266;
font-weight: bold;
}
/* 调整输入框的字数统计的样式，让其向下、向右移动，不会遮挡输入的文字 */
::v-deep .el-textarea .el-input__count {
    font-size: 10px;
    bottom: -6px;
    right: 2px;
}
</style>
